// 自定义组件
Vue.component("headerBar", {
  data() {
    return {
      str2: "子组件中的数据",
    };
  },
  // 声明父类传递过来的值
  props: ["title"],
  template: `<div class="divStyle">
        <table class="tableStyle">
            <tr>
                <td width="200" align="right" valign="middle">
                    <img src="../img/logo.png" class="logoImg">
                </td>
                <td>
                    <label class="titleStyle">{{title}}</label>
                </td>
                <td><slot></slot></td>
                <td><button @click="childMethod">子组件中的按钮</button></td>
            </tr>
        </table>
    </div>`,
  methods: {
    childMethod: function () {
      // 执行父类的方法
      this.$emit("my-event", this.str2);
    },
  },
});
// 自定义组件2
Vue.component("pageFrame", {
  data() {
    return {
      songs: [
        { name: "李四", age: 13 },
        { name: "张三", age: 15 },
      ],
      users: [],
    };
  },
  props: ["title", "cr"],
  template: `<div>
  <div id="header" style="width:100%; height:100px;background:pink"><slot name="s1"></slot></div>
  <div style="width:100%; height:580px;"><slot name="s2" :musics="songs" :us="users"></slot></div>
  <div id="footer" style="width:100%; height:40px; background:red">{{cr}}</div>
  </div>
  `,
});
